<template>
  <div class="container">
    <el-card>
      <el-breadcrumb class="bread" v-if="breadshow">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="header">
        <div>
          <el-row>
            <el-col class="directorys" :span="3">
              <span class="title">标签名称</span>
            </el-col>
            <el-col :span="5">
              <el-input v-model.trim="directorysQuery.tagName" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col class="directorys second" :span="2">
              <span class="title">状态</span>
            </el-col>
            <el-col :span="5">
              <el-select v-model="directorysQuery.state" placeholder="请选择">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <div class="search">
                <el-button class="clear" @click="clear">清除</el-button>
                <el-button type="primary" @click="getList()">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <tags-add @edite="changeshow" :editeshow="editeshow" :editedata="editedata" @add="getList()" :breadshow="breadshow" @back="$router.back()"></tags-add>
      </div>
      <el-alert class="alert" type="info" show-icon :closable="false">
        <template slot="title">数据一共{{ displayData.counts }}条</template>
      </el-alert>
      <template>
        <el-table :data="displayData.items" border style="width: 100%;">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="subjectName" label="所属学科"></el-table-column>
          <el-table-column prop="tagName" label="标签名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column label="创建日期" width="270">
            <template slot-scope="scope">{{ scope.row.addDate | formdate }}</template>
          </el-table-column>
          <el-table-column label="状态" width="200">
            <template slot-scope="scope">
              <span v-text="scope.row.state === 1 ? '已启用' : '已禁用'"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="text" size="mini" v-text="scope.row.state === 1 ? '禁用' : '启用'" @click="changestate(scope.row)"></el-button>
              <el-button type="text" size="mini" :disabled="scope.row.state === 1 ? true : false" @click="editeShow(scope.row)">修改</el-button>
              <el-button type="text" size="mini" :disabled="scope.row.state === 1 ? true : false" @click="deleteDirectorys(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <page-tool @pageChange="pageChange" @pageSizeChange="pageSizeChange" :total="displayData.counts" :paginationPagesize="displayData.pagesize" :paginationPage="displayData.page"></page-tool>
    </el-card>
  </div>
</template>

<script>
import PageTool from '@/module-dashboard/components/pageTool'
import { parseTime } from '@/utils'
import TagsAdd from '../components/tags-add'
import { listTags, changeTagsState, deleteTags } from '@/api/hmmm/tags'
import { getSubjectById } from '@/api/hmmm/subjects'
export default {
  data() {
    return {
      directorysQuery: {
        page: 1,
        pagesize: 10
      },
      displayData: [],
      searchdata: {},
      editeshow: 0,
      editedata: {},
      breadshow: false,
      title: ''
    }
  },
  components: {
    PageTool,
    TagsAdd
  },
  methods: {
    async getList() {
      const { data, status } = await listTags(this.directorysQuery)
      if (status !== 200) {
        this.$message.error('请求标签数据失败')
      }
      this.displayData = data
    },
    pageChange(page) {
      this.directorysQuery.page = page
      this.getList()
    },
    pageSizeChange(pagesize) {
      this.directorysQuery.pagesize = pagesize
      this.getList()
    },
    editeShow(row) {
      this.editeshow = 1
      this.editedata = row
    },
    changeshow(val) {
      this.editeshow = val
    },
    async deleteDirectorys(id) {
      const res = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message('已取消删除')
      }
      const { status } = await deleteTags(id)
      if (status !== 200) {
        return this.$message.error('删除失败')
      }
      if (this.displayData.items.length === 1 && this.directorysQuery.page > 1) {
        this.directorysQuery.page--
      }
      this.$message.success('删除成功')
      this.getList()
    },
    async changestate(row) {
      let statedata = {}
      if (row.state) {
        statedata.state = 0
      } else {
        statedata.state = 1
      }
      statedata.id = row.id
      const { status } = await changeTagsState(statedata)
      if (status !== 200) {
        return this.$message.error('修改状态失败')
      }
      this.$message.success('修改状态成功')
      this.getList()
    },
    async getSubject(id) {
      const { data, status } = await getSubjectById(id)
      if (status !== 200) {
        return this.$message.error('获取数据失败')
      }
      this.title = data.subjectName
      this.directorysQuery.subjectID = data.id
      this.editedata = data
      this.getList()
      console.log(data)
    },
    clear() {
      this.directorysQuery = {}
      this.getList()
    }
  },
  created() {
    if (location.href.split('?')[1]) {
      this.getSubject(
        location.href
          .split('?')[1]
          .split('&')[0]
          .split('=')[1]
      )
      this.breadshow = true
    }
    this.getList()
  },
  filters: {
    formdate(time) {
      return parseTime(time)
    }
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      if (to.query) {
        this.directorysQuery.subjectID = null
        this.breadshow = false
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      line-height: 36px;
    }
    .directorys {
      display: flex;
    }
    .clear {
      margin-left: 10px;
    }
  }
  .alert {
    margin: 15px 0;
  }
  a {
    color: skyblue;
    &:not(:last-child) {
      margin-right: 5px;
    }
  }
  .second {
    margin-left: 15px;
  }
  .bread {
    margin-bottom: 20px;
  }
}
</style>
